<template>
  <div class="test">
    <button @click="isShow = !isShow">toggle</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div v-if="isShow">显示隐藏</div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    // 进入之前
    beforeEnter(el) {
      el.style.transform = 'translate(0,0)'
    },
    enter(el, done) {
      // 强制刷新
      // eslint-disable-next-line no-unused-expressions
      el.offsetTop
      el.style.transform = 'translate(300px,300px)'
      el.style.transition = 'all 1s ease'
      done()
    },
    afterEnter() {
      this.isShow = false
    }
  }

  // false ---> true ---> false
}
</script>
<style lang="scss" scoped></style>
